<template>
	<view class="home">
		<page-meta :root-font-size="fontsize+'px'"></page-meta>
		<image mode="aspectFill" @load="imageLoad" class="bgimage" :src="bgimage"></image>
		<view class="bigFull" v-for="(newItem,newIndex) in vesselData" :key="newIndex"
			:style="{zIndex: newIndex+1,transition: 'all 3s linear 0s',opacity: vesselBigOpacity[newIndex]}">
			<view class="boxItmes" v-for="(item,index) in newItem" :key="index"
				:style="{zIndex: index+1,transition: 'all 3s linear 0s',opacity:vesselOpacity[newIndex][index] ? 1 : 0}">

				<vessel :long="(vesselData.length-1)" v-show="vesselOpacity[newIndex][index]"
					:style="{zIndex: index+1,transition: 'all 3s linear 0s'}" :logoWidth="logoWidth"
					:logoTime="logoTime" :bgimages="bgimage" :vesselBigIndex="newIndex"
					:trueVesselBigIndex="vesselBigIndex" :data="item" :trueVesselIndex='vesselIndex'
					:vesselIndex="index" :progress="progress" :isdDownload="isdDownload"
					@updataVesselVideoImg="updataVesselVideoImg" @updataNumFloor="updataNumFloor"
					@updataPlayStyle="updataPlayStyle" @updataEndStyle="updataEndStyle">
				</vessel>
			</view>
		</view>
		<button class="taggeBut" @click="stopBut"></button>

		<view class="loadingBox" v-if="(isShow01 || isShow02)">
			<image mode="widthFix" src="../../static/loading.gif"></image>
		</view>
	</view>
</template>

<script>
	// import $ from '../../static/jquery.js'  
	import vessel from "../../components/home01";
	export default {
		data() {
			return {
				// 二级屏
				vesselData: [],
				vesselTagger: [
					[],
					[]
				],
				vesselOpacity: [
					[],
					[]
				],
				vesselEnd: false,
				vesselCanvas: [],
				vesselVideoImg: [],
				vesselIndex: 0,
				// 一级屏
				vesselBigOpacity: [],
				vesselBigIndex: 0,
				// all 7s linear 0s
				transitionVal: "all 0s linear 0s",
				// translateX(-2000px)
				translatexVal: 'none',
				nextVesselIndex: 0,
				logoWidth: 0,
				// itemTime: 5,
				// LOGO移动速度
				itemTime: 5,
				logoTime: 0,
				LogoTIME: null,
				original: 0,
				originalTime: 0,
				bgimage: '',
				isShow01: true,
				isShow02: true,
				fontsize: 16,
				isOne: 0,
				isEndStyle: 0,
				flatData: [],
				downloadFile: '',
				index: -1,
				progress: 0,
				isdDownload: false,
				isBeg: false,
				cityId: null,
				city: [],
				remainingTime: 0,
				// 每30分钟看后台是否有更新操作
				clockTime: 5 * 60 * 1000,
				// 数据是否更新
				isUpdate: false,
				nowVesselDataItem: null,
				nowVesselData: null,
				nowVesselBigIndex: 0,
				// 是否经历了数据本地话
				isVesselData: false,
				// 下载对象
				myDownloadTask: null

			};
		},

		onLoad() {
			this.isdDownload = uni.getStorageSync('isdDownload');

			let srceenNunber = 38.4; //因设计图是1920所有把设计图分为19.2份，所以html字体大小为100px
			let that = this;

			//窗体改变大小触发事件
			uni.onWindowResize((res) => {
				// console.log('变化后的窗口宽度=', res.size.windowWidth);
				that.fontsize = parseFloat(res.size.windowWidth) / srceenNunber;
			})

			//打开获取屏幕大小
			uni.getSystemInfo({
				success(res) {
					// console.log('设备信息：', res);
					that.fontsize = res.screenWidth / srceenNunber;
					// console.log('字体大小：', that.fontsize);
				}
			})

			// 初始化数据
			this.initData();
		},
		onReady() {
			let windowWidth = uni.getSystemInfoSync().windowWidth * 2;
			let windowHeight = uni.getSystemInfoSync().windowHeight * 2;
			// console.log('windowWidth=====>', windowWidth);
			// console.log('windowHeight=====>', windowHeight);
		},
		computed: {

		},

		components: {
			vessel
		},
		watch: {
			vesselBigIndex(newVal, oldVal) {

				if (this.isUpdate) {

					let Ndata = [];
					if (newVal == 0) {
						Ndata = [this.vesselData[0], this.vesselData[0]];
					} else if (newVal == 1) {
						Ndata = [this.vesselData[1], this.vesselData[1]];
					}

					this.vesselData = JSON.parse(JSON.stringify(Ndata));
					// console.log('this.isUpdate------------->', this.isUpdate)
					console.log('------------------------------------------>数据更新 第二步   补齐------------------------------------------>')


					uni.setStorage({
						key: 'brandArrs',
						data: JSON.stringify(Ndata),
						success: () => {
							console.log('重新获取数据-----异步了!!');

							this.$api.configClearEnd().then(resss => {
								if (resss.code == 200) {
									// debugger

									// 初始化数据
									this.initData();

								}
								console.log('--------------> 清除服务器更新缓存 <--------------', resss)
							});
						}
					});
				}
				
				if(this.isVesselData){
					if(this.nowVesselBigIndex != newVal){
						if(this.nowVesselBigIndex == 0){
							this.vesselData = [this.nowVesselDataItem,this.vesselData[1]];
						}else if(this.nowVesselBigIndex == 1){
							this.vesselData = [this.vesselData[0],this.nowVesselDataItem];
						}
						uni.setStorage({
							key: 'brandArrs',
							data: JSON.stringify(this.vesselData),
							success: () => {
								// this.isOne = 0;
								this.index = -1;
								
								console.log('============================>回塞数据 异步了！！第二步 补齐============================>',this.nowVesselBigIndex)
							}
							})
						
						this.isVesselData = false;
					}
				}


			}
		},
		methods: {
			toJSON() {
				return this
			},
			// logo屏幕 dom显示 7条
			updataNumFloor(stratNum) {
				let newVesselData = JSON.parse(JSON.stringify(this.vesselData));
				// console.log('newVesselData----->',newVesselData)
				newVesselData.forEach((newItem, idnex) => {
					if (idnex == this.vesselBigIndex) {
						// console.log('dom显示dom显示--->',newItem)
						newItem.forEach(item => {
							if (item.type == "LOGO") {
								item.brands.forEach((oneItem, oneIdnex) => {
									oneItem.isDisplay = false;
									if (stratNum == oneIdnex || (oneIdnex <= stratNum + 6 &&
											oneIdnex >= stratNum)) {
										if (oneItem) {
											oneItem.isDisplay = true;
										}
									}
								})
							}
						})
					}

				});
				this.vesselData = JSON.parse(JSON.stringify(newVesselData));

				// console.log('重新更新后的数据---------->',this.vesselData);
			},
			// 初始化数据
			initData() {
				let that = this;
				that.vesselBigOpacity = [];
				that.vesselOpacity = [
					[],
					[]
				];
				that.vesselTagger = [
					[],
					[]
				];
				uni.getStorage({
					key: 'brandArrs',
					success: function(res) {
						that.vesselData = JSON.parse(res.data);
						// console.log('一级屏幕数据---->',that.vesselData);
						that.vesselData.forEach((item, index) => {

							// 一级数据屏幕的显隐初始化
							if (index == 0) {
								that.vesselBigOpacity.push(1);
							} else {
								that.vesselBigOpacity.push(0);
							}
							// 二级数据屏幕的显隐初始化
							let newVesselOpacity = that.vesselOpacity;
							item.forEach((newItem, newIndex) => {
								that.vesselTagger[index].push(true);
								if (index == 0) {

									if (newIndex == 0) {
										if (this.isUpdate) {
											newVesselOpacity[index].push(false);
										} else {
											newVesselOpacity[index].push(true);
										}

									} else {
										newVesselOpacity[index].push(false);
									}
								} else {
									newVesselOpacity[index].push(false);
								}
							});
							that.vesselOpacity = JSON.parse(JSON.stringify(newVesselOpacity));
						});
						
						uni.getNetworkType({
							success: (res) => {
						
								let isConnected = res.networkType == "none" ? false : true;
								uni.setStorageSync('isConnected', isConnected);
								// console.log("是否离线 true为有网 false为无网==================>", isConnected);
								if (isConnected) {
									this.index = -1;
									// this.isOne = 0;
									this.isdDownload = false;
									uni.setStorageSync('isdDownload',false);
								// 下载zip
								that.downloadTask();
								} else {
									console.log('请联网')
								}
						
							}
						});
					}
				});
				this.isUpdate = false;
				this.bgimage = uni.getStorageSync('bgimage');
				// console.log('that.vesselOpacity---->',that.vesselOpacity)
				// console.log('vesselOpacity----->', this.vesselOpacity);
				// console.log('vesselTagger------->', this.vesselTagger);
			},
			// zip包下载
			downloadTask() {
				
				this.downloadFile = `${this.$config.url}profile/upload.zip`;
				
				console.log('地址------->',this.downloadFile)
				console.log('是否有下载对象   ----->',this.myDownloadTask)
				if(this.myDownloadTask){
					this.isdDownload = false;
					this.progress = 0;
					uni.setStorageSync('isdDownload',false)
					this.myDownloadTask.abort();
					let myVideo = uni.createVideoContext(this.vesselId);
						myVideo.play();
					console.log("----------------------------------------> 已中断之前的下载任务 <----------------------------------------")
				}
				console.log("=============> 开始下载zip <==============");
				this.myDownloadTask = uni.downloadFile({
					url: this.downloadFile,
					success: (res) => {
						if (res.statusCode === 200) {
							// 解压路径 
							let zipfile = res
								.tempFilePath; //_doc/uniapp_temp_1639553429320/download/upload01.zip

							// 数据扁平化   
							this.nowVesselDataItem = null;
							if(this.vesselBigIndex == 0){
								this.nowVesselDataItem = JSON.parse(JSON.stringify(this.vesselData[1]));
							}else if(this.vesselBigIndex == 1){
								this.nowVesselDataItem = JSON.parse(JSON.stringify(this.vesselData[0]));
							}
							this.flatData = this.flat(this.nowVesselDataItem);
							this.flatData = [...this.flatData, ...this.flat(this.bgimage)];
							// console.log("数据扁平化  flatData=========>", this.flatData);



							// 本地转安卓平台路径
							let newPath = plus.io.convertLocalFileSystemURL(res.tempFilePath);

							let nowPath = `file://${newPath}`;
							console.log("下载成功=========>", nowPath);
							let targetPath = '_doc/'

							console.log('下载成功！！！！')
							// 解压文件
							plus.zip.decompress(zipfile, targetPath,
								() => {
									console.log("解压成功==============>");
									// 读取文件
									this.resolveFile(this.flatData);
								});
						}

					}
				});

				this.myDownloadTask.onProgressUpdate((res) => {
					// console.log('下载进度' + res.progress);
					this.progress = res.progress
				});

			},
			// 直接获取文件资源
			resolveFile(data) {
				this.index++;
				let filePath = data[this.index].filePath;
				let fileName = data[this.index].fileName;
				let Id = data[this.index].id;

				let nowTargetPath = `${filePath}${fileName}`;

				// console.log('本地文件路径==========>', nowTargetPath)
				// 本地转安卓平台路径
				let newPath = plus.io.convertLocalFileSystemURL(nowTargetPath);
				let androidUrl = `file://${newPath}`;

				// console.log("本地文件路径 转为 安卓端路径=========>", androidUrl);
				if (Id != "bgimage") {
					this.replaceData(androidUrl, Id);
				} else {
					this.replaceImg(androidUrl, Id);
				}
			},
			//替换网络路径的图片
			replaceImg(androidUrl, name) {
				this.bgimage = androidUrl;
				uni.setStorageSync('bgimage', this.bgimage);
				if (this.index != this.flatData.length - 1) {
					// 递归 遍历 扁平化数据
					console.log(
						"---------------------------------------------------------------------------------------------"
					)
					this.resolveFile(this.flatData);
				}
			},
			// 本地路径 回塞 原有数据
			replaceData(androidUrl, name) {
				// console.log("安卓端本地路径--->", androidUrl);
				// console.log("这条资源 在原数据的位置------->", name);
				let screenId = "";
				

				let nowMoniData = []
				if(name.indexOf("-") != -1 ){
					screenId = name.split('-')[0]; //屏幕类型_第几屏
				}else{
					screenId = name;
				}
				
				let screenType = screenId.split('_')[0];
				
				let newMoniData = JSON.parse(JSON.stringify(this.nowVesselDataItem));
				let logoRow = null;
				let logoList = null;
				if (screenType == "LOGO") {
					logoRow = Number(name.split('-')[1].split('_')[0]);
					logoList = Number(name.split('-')[1].split('_')[1]);
				}

				newMoniData.forEach(item => {
					// console.log('------------------------------------------->item.id == screenId------------------------------------------->',item.id,screenId)
					if (item.id == screenId) {
						if (screenType != "LOGO") {
							item.brands = androidUrl;
							// console.log('------------------------------------------->视频的进来了------------------------------------------->',item.id,androidUrl)
						} else {
							let newBrands = JSON.parse(JSON.stringify(item.brands));
							newBrands.forEach((oneItem, oneIndex) => {
								if (oneIndex == logoRow) {
									// console.log('oneItem-------->',oneItem)
									if(Array.isArray(oneItem)){
										
									}else{
										oneItem.arr.forEach(twoItem => {
											if (twoItem.id == name) {
												// console.log('设置原有数据 的本地资源路径==========>', twoItem.id,
												// 	name)
												twoItem.Src = androidUrl;
											}
										})
									}
									
								}
							});
							item.brands = JSON.parse(JSON.stringify(newBrands));
						}
					}
				});
				this.nowVesselDataItem = JSON.parse(JSON.stringify(newMoniData));
				
				
				

				// console.log('回塞后的数据==============>',this.vesselData)
				console.log('扁平化数据条数=============>', this.index, this.flatData.length - 1)
				if (this.index != this.flatData.length ) {
					// 递归 遍历 扁平化数据
				
					
					
							// console.log('回塞数据 异步了!!=======>',this.vesselData);
							this.resolveFile(this.flatData);
							if (this.index == this.flatData.length - 1 ) {
								if(this.vesselBigIndex == 0){
									this.vesselData = [this.vesselData[0],this.nowVesselDataItem];
									this.nowVesselBigIndex = 0;
								}else if(this.vesselBigIndex == 1){
									this.vesselData = [this.nowVesselDataItem,this.vesselData[1]];
									this.nowVesselBigIndex = 1;
								}
								
								
								uni.setStorage({
									key: 'brandArrs',
									data: JSON.stringify(this.vesselData),
									success: () => {
										this.isVesselData = true;
										console.log('回塞数据 异步了！！第一步 缺屏============================>',this.vesselBigIndex)
										// console.log('------------> 回塞数据 完毕 <--------------', this.flatData);
										this.isdDownload = true;
										uni.setStorageSync('isdDownload', true);
									}
									})
								
								
							}

						
					

				}
			},
			// 获取 “_doc/XXXX/MM/DD/”格式
			fixationData(data) {
				// console.log('data-------->', data)
				if (data) {
					let filePathArr = data.split(`${this.$config.url}`)[1].split('/');
					filePathArr.shift();
					let fileName = filePathArr.pop();
					let filePath = `_doc/${filePathArr.join('/')}/`;
					return {
						filePath,
						fileName
					};
				}

			},
			// 数据扁平化
			flat(data) {
				let nowFlatData = [];
				console.log('是否为数组---------->', Array.isArray(data))
				if (Array.isArray(data)) {
					let newData = JSON.parse(JSON.stringify(data));
					newData.forEach(oneItem => {
						if (oneItem.type != "LOGO") {
							let {
								filePath,
								fileName
							} = this.fixationData(oneItem.brands);
							nowFlatData.push({
								url: oneItem.brands,
								id: oneItem.id,
								fileName,
								filePath
							});
						} else {
							oneItem.brands.forEach(twoItem => {
								// console.log("twoItem----------->",twoItem)
								if(Array.isArray(twoItem)){
									
								}else{
									twoItem.arr.forEach(threeItem => {
										let {
											filePath,
											fileName
										} = this.fixationData(threeItem.Src);
										nowFlatData.push({
											url: threeItem.Src,
											id: threeItem.id,
											fileName,
											filePath
										});
									})
								}
								
							})
						}
					});
				} else {
					let {
						filePath,
						fileName
					} = this.fixationData(data);
					nowFlatData.push({
						url: data,
						id: 'bgimage',
						fileName,
						filePath
					});
				}

				// console.log('nowFlatData======>',nowFlatData);
				return nowFlatData;
			},
			updataVesselVideoImg(data) {
				this.vesselVideoImg = JSON.parse(data);
				this.$forceUpdate();
				// console.log('this.vesselVideoImg============>', JSON.stringify(this.vesselVideoImg))
			},
			imageLoad() {
				this.isShow01 = false;
				// console.log('背景图片已加载完毕 <============', this.isShow01, this.isShow02, (this.isShow01 && this.isShow02))
			},
			updataPlayStyle({
				vesselIndex,
				vesselId,
			}) {
				this.isShow02 = false;
				// console.log('视频资源已加载完毕 <============', this.isShow01, this.isShow02, (this.isShow01 && this.isShow02))
				// console.log('获取到的父节点 视频与屏数======>', vesselIndex, vesselId);
				this.endVesselId = null;
				this.isOne++;
				let myVideo = uni.createVideoContext(vesselId);
				if (this.isOne == 1) {
					// myVideo.seek(1);
					myVideo.play();
					
					
					

					let isConnected = uni.getStorageSync('isConnected');
					console.log('isConnected----------------->', isConnected)
					
						let setTime = null;
						clearInterval(setTime);

						setTime = setInterval(() => {
							uni.getNetworkType({
								success: (res) => {
							
									let isConnected = res.networkType == "none" ? false : true;
									uni.setStorageSync('isConnected', isConnected);
									// console.log("是否离线 true为有网 false为无网==================>", isConnected);
									if (isConnected) {
									// 查看后台是否有更新操作
									this.updataConfigClear();
									} else {
										console.log('请联网')
									}
							
								}
								
							});
						}, this.clockTime);
						// 30*60*
					

				}


				console.log('获取视频对象======>', myVideo);
				// this.transitionVal =  `all ${duration}s linear 0s`;
				// this.translatexVal =  `translateX(${journey}px)`;


			},
			myinIt() {
				this.cityId = uni.getStorageSync('cityId');
				console.log("当前的城市id------>", this.cityId)
				this.cityInit().then(res => {
					this.city.forEach(item => {
						// console.log('===>', item.id == this.cityId, item.id, this.cityId)
						if (item.id == this.cityId) {
							console.log("当前的城市id------>", this.cityId)
							this.ff_click(item.id, item.bgimage);
						}
					});
				});
			},
			cityInit() {
				return new Promise((ress, rejj) => {
					this.$api.apiCities().then(res => {
						if (res.code == 200) {
							// console.log("res===>", res.data);
							this.city = res.data;
							ress();
						}
					});
				});
			},

			ff_click(id, bgimage) {
				let src = `api/cities/${id}/display`;
				this.$api.apiDiplay(src).then(res => {
					if (res.code == 200) {

						// console.log("res====>", res.data);
						let newData = JSON.parse(JSON.stringify(res.data));
						newData.forEach(item => {
							item.background = bgimage;
						});
						// 
						let Ndata = this.$Tools.ff_package(newData);


						uni.setStorageSync('bgimage', bgimage);
						console.log('bgimage===>', bgimage)


						if (this.vesselBigIndex == 0) {
							Ndata = [this.vesselData[0], Ndata];
						} else if (this.vesselBigIndex == 1) {
							Ndata = [Ndata, this.vesselData[1]];
						}
						this.isUpdate = true;
						this.vesselData = JSON.parse(JSON.stringify(Ndata));

						console.log('数据更新 第一步的数据 缺屏------>',this.vesselBigIndex);
					}
				});
			},
			// 判断后台是否有更新操作
			updataConfigClear() {
				let that = this;

				this.$api.configClear().then(configClearRes => {
					let isConfigValue = configClearRes.data.configValue;
					if (isConfigValue == 'true') {
						this.myinIt();
						console.log('需要操作 configClearRes------->', isConfigValue)
					}
				});


			},
			updataEndStyle({
				itemWidth,
				vesselId
			}) {

				this.itemWidth = itemWidth;

				console.log('------->------->视频流结束播放------->------->', this.vesselEnd, this.endVesselId)

				// #ifdef APP-PLUS
				if (this.endVesselId != vesselId) {
					this.endVesselId = vesselId
				} else {
					return;
				}
				this.vesselEnd = true;
				// #endif
				// #ifdef H5
				this.isEndStyle++;
				if (this.isEndStyle % 2 != 0) {
					this.vesselEnd = true;
				} else if (this.isUpdate) {
					this.vesselEnd = true;
				}
				// #endif

				this.pyScape();
			},
			pyScape() {

				console.log('刚开始的屏幕切换调用========> ', this.vesselEnd);
				if (this.vesselEnd) {
					this.vesselEnd = false;
					console.log('判断当前屏幕的位置 以及处理当前屏========> ', this.vesselOpacity);
					// 判断当前屏幕的位置 以及处理当前屏
					this.vesselOpacity.forEach((item, index) => {
						item.forEach((newItem, newIndex) => {
							if (newItem) {
								this.vesselBigOpacity[this.vesselBigIndex] = 0;
								this.vesselOpacity[0][0] = false;
								this.vesselOpacity[this.vesselBigIndex][this.vesselIndex] = false;

								// 设置前一屏幕的时间
								this.screenType = this.vesselData[this.vesselBigIndex][this.vesselIndex]
									.type;
								this.vesselId = this.vesselData[this.vesselBigIndex][this.vesselIndex].id;
								if (this.screenType == 'LOGO') {
									setTimeout(() => {
										this.logoWidth = 0;
										this.logoTime = 0;
									}, 1000);

								} else {
									let myVideo = uni.createVideoContext(this.vesselId);
									setTimeout(() => {
										myVideo.seek(0);
										myVideo.pause();
									}, 2000);

									console.log('已设置视频为0s')
								}

								console.log('当前大屏数 小屏数---->', this.vesselBigIndex, this.vesselIndex);
								if (this.vesselBigIndex == 0 && (newIndex < item.length - 1)) {
									this.vesselIndex = newIndex + 1;
									// debugger
									this.vesselIndex = this.vesselIndex >= item.length ? 0 : this
										.vesselIndex;
								} else if (this.vesselBigIndex == 0 && (newIndex >= item.length - 1)) {
									this.vesselIndex = 0;
									this.vesselBigIndex = 1;
								} else if (this.vesselBigIndex == 1 && (newIndex < item.length - 1)) {
									this.vesselIndex = newIndex + 1;

									this.vesselIndex = this.vesselIndex >= item.length ? 0 : this
										.vesselIndex;
								} else if (this.vesselBigIndex == 1 && (newIndex >= item.length - 1)) {
									// debugger
									this.vesselIndex = 0;
									this.vesselBigIndex = 0;
								}
								console.log('更换后的大屏数 小屏数---->', this.vesselBigIndex, this.vesselIndex);
							}
						});
					});



					// 按照现有位置 进行顺序更改
					let newVesselOpacity = JSON.parse(JSON.stringify(this.vesselOpacity));

					this.vesselBigOpacity[this.vesselBigIndex] = 1;
					newVesselOpacity.forEach((item, index) => {
						item.forEach((newItem, newIndex) => {
							newItem = false;


						});
					});

					this.vesselOpacity = JSON.parse(JSON.stringify(newVesselOpacity));
					this.vesselOpacity[this.vesselBigIndex][this.vesselIndex] = true;
					console.log('this.vesselOpacity-------->', this.vesselOpacity)

					// 下一子屏的内容处理
					let nextVeseel = this.vesselData[this.vesselBigIndex][this.vesselIndex];
					// debugger
					let nextVesselId = this.vesselData[this.vesselBigIndex][this.vesselIndex].id;
					// // console.log('nextVeseel====>', this.nextVesselIndex, this.vesselData)
					if (nextVeseel.type == "LOGO") {
						setTimeout(() => {
							this.logoWidth = -(nextVeseel.brands.length * this.itemWidth) + (3 * this.itemWidth);
							
							this.original = this.logoWidth;
							this.logoTime = nextVeseel.brands.length * this.itemTime ;
							this.originalTime = this.logoTime;
							// console.log('获取到的父节点 结束 屏数======>', this.nextVesselIndex);
							console.log('this.logoTime----------------------------->', this.logoTime,this.logoWidth)

							// 同一时间段 切换屏幕
							clearTimeout(this.LogoTIME);
							this.LogoTIME = setTimeout(() => {
								console.log('LOGO监听结束  <======', this.nextVesselIndex)
								this.vesselEnd = true;
								this.pyScape()
							}, this.logoTime * 1000);
						}, 3000);
					} else {
						// setTimeout(() => {
						let myVideo = uni.createVideoContext(nextVesselId);
						// myVideo.seek(0);

						myVideo.play();
						// console.log('继续播放====> 下一子屏', nextVesselId)
						// debugger
						// }, 1500)
					}
					console.log('this.vesselOpacity--->', this.vesselOpacity)

				}


			},
			// 切换暂停与播放
			stopBut() {
				let veseelType = this.vesselData[this.vesselBigIndex][this.vesselIndex].type;
				let vesselId = this.vesselData[this.vesselBigIndex][this.vesselIndex].id;
				let vesselBrands = this.vesselData[this.vesselBigIndex][this.vesselIndex].brands;
				let isTagger = this.vesselTagger[this.vesselBigIndex][this.vesselIndex];
				// console.log('切换屏幕====================>', veseelType)
				if (veseelType == 'LOGO') {

					// this.$nextTick(()=>{
					let id = `${vesselId}_${this.vesselBigIndex}`
					uni.createSelectorQuery().select(`#${id}`).boundingClientRect(data => {
						let experienceJourney = Math.floor(Math.abs(Number(data.left)));
						// let remainingTime = (this.itemTime) * Math.round(experienceJourney / this.itemWidth);

						if (isTagger) {
							this.remainingTime = (this.itemTime) * (vesselBrands.length - Math.round(
								experienceJourney / this.itemWidth));
							this.logoWidth = -experienceJourney;
							console.log('屏幕暂停动画===================>', this.remainingTime)
							this.logoTime = 0;
							clearTimeout(this.LogoTIME);

						} else {
							this.logoWidth = this.original;
							this.logoTime = this.remainingTime;
							clearTimeout(this.LogoTIME);
							console.log('屏幕动画重新开启===================>', this.logoTime)
							this.LogoTIME = setTimeout(() => {
								console.log('LOGO监听结束  <======')
								this.vesselEnd = true;
								this.pyScape()
							}, this.logoTime * 1000);
						}


					}).exec()


				} else {
					let myVideo = uni.createVideoContext(vesselId);
					if (isTagger) {
						myVideo.pause();
						console.log('屏幕暂停动画===================>')
					} else {
						myVideo.play();
						console.log('屏幕动画重新开启===================>')
					}
				}
				let newTagger = JSON.parse(JSON.stringify(this.vesselTagger));
				newTagger[this.vesselBigIndex][this.vesselIndex] = !newTagger[this.vesselBigIndex][this.vesselIndex];
				this.vesselTagger = JSON.parse(JSON.stringify(newTagger));


			}
		}


	};
</script>
<style lang="scss">
	.home {
		width: 100%;
		height: 100vh;
	}

	// .canvasBg{
	// 	width: 100%;
	// 	height: 100vh;
	// 	background-color: red;
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	z-index: 999;
	// }

	.bgimage {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;

		/deep/img {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.loadingBox {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.bigFull {
		width: 100%;
		height: 100%;
	}

	.taggeBut {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: transparent;
		border: none;
		outline: none;
		z-index: 999;
	}

	.boxItmes {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100vh;
	}
</style>
